<template>
<!-- 添加菜单 -->
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="父级菜单" prop="parentId">
           <el-select v-model="addForm.parentId" placeholder="请选择" @change="disabledDir()">
             <el-option label="无" value=""></el-option>
            <el-option
              v-for="item in parentMenus"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="菜单名" prop="name">
            <el-input v-model="addForm.name"></el-input>
        </el-form-item>
         <el-form-item label="组件路径" prop="componentPath">
            <el-input v-model="addForm.componentPath"></el-input>
        </el-form-item>
         <el-form-item label="授权" prop="perms">
            <el-input v-model="addForm.perms"></el-input>
        </el-form-item>
         <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="addForm.type">
              <el-radio v-for="item in types" :key="item.id" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
            <el-select v-model="addForm.icon" placeholder="请选择">
              <el-option
                v-for="item,index in icons"
                :key="index"
                :label="item"
                :value="item">
                <i :class="item"></i>
              </el-option>
            </el-select>
            <i :class="addForm.icon" class="demo-icon"></i>
        </el-form-item>
       <el-form-item label="菜单状态" prop="status">
            <el-radio-group v-model="addForm.status">
              <el-radio v-model="addForm.status" label="0">正常</el-radio>
              <el-radio v-model="addForm.status" label="1">停用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">立即创建</el-button>
            <el-button @click="resetForm('addForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import Qs from "qs";
  export default {
    data() {
      return {
        types:[{id:0,name:"目录"},{id:1,name:"菜单"},{id:2,name:"按钮"}],
        icons:["el-icon-user-solid","el-icon-user-solid"],
        parentMenus:[],
        imageUrl:'',
        icon:"",
        addForm:{
          parentId:"",
          name:"",
          componentPath:"",
          perms:"",
          type:"0",
          icon:"",
          status:"0"
        },
        rules: {
          name: [
            { required: true, message: '请输入菜单名', trigger: 'blur' }
          ],
          componentPath: [
            { required: true, message: '请输入组件路径', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择菜单类型', trigger: 'change' }
          ],
          icon: [
            { required: true, message: '请选择图标', trigger: 'change' }
          ],
          status: [
            { required: true, message: '请选择菜单状态', trigger: 'change' }
          ]
        }
      };
    },
    created(){
      this.getIcons();
      this.getParentMenus();
      this.disabledDir();
    },
    methods: {
      //父级目录为无时，只能选择
      disabledDir(){
        if(this.addForm.parentId === ""){
            this.addForm.type = 0
            this.types = [{id:0,name:"目录"}];
        }else{
          this.addForm.type =  1
            this.types = [{id:1,name:"菜单"},{id:2,name:"按钮"}];
        }
      },
      // 获取目录列表
      async getParentMenus(){
         const res = await this.$http.get("/menu/getDirections")
         this.parentMenus=res.data.data;
      },
      //获取图标列表
      async getIcons(){
        const res = await this.$http.get("/menu/getIcons")
         this.icons=res.data.data;
      },
        // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const res = await this.$http.post("/menu/saveMenu",Qs.stringify(this.addForm))
             if(res.data.code != 200){
                this.$message.error(res.data.msg);
              }else{
                this.$message({
                  message: '添加菜单成功',
                  type: 'success'
                });
              }
          } else {
            return false;
          }
        });
      },
    //   重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.disabledDir();
      },
    },
  }
</script>

<style scoped>
  .demo-icon{
    width: 50px;
    height: 50px;
    align-content: center;
    margin-left: 20px;
    margin-top: 10px;
    font-size: 25px;
  }
</style>